<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 字体图标文件 -->
    <link rel="stylesheet" href="./fonts/icomoon.css">
    <!-- 公共样式文件 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 我们的样式文件 -->
    <link rel="stylesheet" href="./css/demo.css">
</head>

<body>
    <!-- 页面大盒子 -->
    <div class="layout">
        <div class="column">
            <div class="left-column info">
                <ul>
                    <li>
                        <h4>2190</h4>
                        <span>
                            <i class="icon-dot" style="color: #0066f1;"></i>
                            设备总数</span>
                    </li>
                    <li>
                        <h4>190</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3;"></i>
                            季度新增</span>
                    </li>
                    <li>
                        <h4>3001</h4>
                        <span>
                            <i class="icon-dot" style="color: #6acca3;"></i>
                            运营设备</span>
                    </li>
                    <li>
                        <h4>108</h4>
                        <span>
                            <i class="icon-dot" style="color: #ed3f35;"></i>
                            异常设备</span>
                    </li>
                </ul>
            </div>
            <div class="left-column info">
                <div class="taps">
                    <span class="fault">
                        <a href="#" data-index='0'>故障设备监控</a>
                    </span>
                    <span class="unusual">
                        <a href="#" data-index='1'>异常设备监控</a>
                    </span>
                </div>
                <div class="details">
                    <span>故障时间</span>
                    <span>设备地址</span>
                    <span>异常代码</span>
                </div>
                <div class="fault-list">
                    <ul>
                        <li>
                            <span class="icon-dot"></span>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <!-- <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li> -->
                    </ul>
                </div>
                <div class="fault-list" style="display: none;">
                    <ul>
                        <li>
                            <span>20200306</span>
                            <span>陈奇康是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                        <li>
                            <span>20200306</span>
                            <span>彭自开是个好人，他值得更好的!</span>
                            <span>100086</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="left-column info">
                <h4>占位站点分布统计</h4>
                <div class="station">
                    <div class="station-map"></div>
                    <div class="station-data">
                        <div>
                            <h2>32011</h2>
                            <span>
                                <i class="icon-dot" style="color: #0066f1;"></i>设备总数</span>
                        </div>
                        <div>
                            <h2>418</h2>
                            <span>
                                <i class="icon-dot" style="color: #0066f1;"></i>设备总数</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="center-column">
                <h3>
                    <span class="icon-cube"></span>
                    <span class="map-title">
                        设备数据统计
                    </span>
                </h3>
                <div class="map"></div>
            </div>
            <div class="center-column info">
                <h4>全国用户总量统计</h4>
                <div class='users'>
                    <div class="users-map">
                    </div>
                    <div class="users-data">
                        <div>
                            <h2>32011</h2>
                            <span>
                                <i class="icon-dot" style="color: #0066f1;"></i>设备总数</span>
                        </div>
                        <div>
                            <h2>418</h2>
                            <span>
                                <i class="icon-dot" style="color: #0066f1;"></i>设备总数</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="column">
            <div class="right-column info">
                <div class='indent-title'>
                    <a href="#" data-type='data365'>365天</a>
                    <a href="#" data-type='data90'>90天</a>
                    <a href="#" data-type='data30'>30天</a>
                    <a href="#" data-type="data24">24小时</a>
                </div>
                <div class='indent-data'>
                    <div>
                        <h4></h4>
                        <span class='icon-dot'>订单量</span>
                    </div>
                    <div>
                        <h4></h4>
                        <span class='icon-dot'>销售额(万元)</span>
                    </div>
                </div>

            </div>
            <div class="right-column info">
                <div class="market-tilte">
                    <div class='statistics'>销售额统计</div>
                    <div class='time'>
                        <a href="javascript:;" data-type='year' class='setting'>年</a>
                        <a href="javascript:;" data-type='quarter'>季</a>
                        <a href="javascript:;" data-type='month'>月</a>
                        <a href="javascript:;" data-type='week'>周</a>
                    </div>
                </div>
                <div class='liner'></div>
            </div>
            <div class="right-column">
                <div class="info">
                    <h4>渠道分布</h4>
                    <div class='ditch'>
                        <div>
                            <span class='ditch-title'>39<i>%</i></span>
                            <span class='ditch-plane'><i class='icon-plane'></i> 机场</span>
                        </div>
                        <div>
                            <span class='ditch-title'>39<i>%</i></span>
                            <span class='ditch-plane'><i class='icon-plane'></i> 机场</span>
                        </div>
                        <div>
                            <span class='ditch-title'>39<i>%</i></span>
                            <span class='ditch-plane'><i class='icon-plane'></i> 机场</span>
                        </div>
                        <div>
                            <span class='ditch-title'>39<i>%</i></span>
                            <span class='ditch-plane'><i class='icon-plane'></i> 机场</span>
                        </div>
                    </div>
                </div>
                <div class="info">
                    <h5>一季度销售进度</h5>
                    <div class='bridge'>
                    </div>
                    <div class='bridge-data'>
                        <div>
                            <span>1321</span>
                            <span class='icon-dot'>销售额</span>
                        </div>
                        <div>
                            <span>150%</span>
                            <span class='icon-dot'>同比增长</span>
                        </div>
                    </div>
                    <div class='shuju'>100%</div>
                </div>
            </div>
            <div class="right-column info">
                <div>
                    <h5>全国热榜</h5>
                    <span><i class='icon-cup1'></i>李二</span>
                    <span><i class='icon-cup2'></i>阿姀</span>
                    <span><i class='icon-cup3'></i>薇子</span>
                </div>
                <div>
                    <h5>各省热线</h5>
                </div>
                <div>
                    <h5>//近30天//</h5>
                </div>
            </div>
        </div>
    </div>
</body>
<!--引入图表 js 文件 -->
<script src="./js/echarts.min.js"></script>
<!-- 引入中国地图 js 文件 -->
<script src="./js/china.js"></script>
<!-- 引入 JQ 文件 -->
<script src="./js/jquery-2.2.2.js"></script>
<!-- 引入地图数据文件
<script src="./js/mychart-map.js"></script> -->
<!-- 引入我们的 js 文件 -->
<!-- <script src="./js/index.js"></script> -->
<script src="./js/demo.js"></script>
<script>
    // $('.left-column').on('click', '.taps a', function () {
    //     console.log(1)
    // })
</script>

</html>